<template>
  <div :style="{'left':leftVal}" class="detail">
    <div class="head">
      <a href="javascript:;" @click="backPrev">
        <i class="iconfont icon-fanhui"/>
      </a>{{ title }}
    </div>
    <ul>
      <li v-for="item in detailData" :key="item.id"><span>{{ item.name }}</span><span>{{ item.value }}</span></li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    leftVal: {
      type: String,
      default: '100%'
    },
    detailData: {
      type: Array,
      default: function () {
        return []
      }
    },
    title: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      lists: []
    }
  },
  methods: {
    backPrev () {
      this.$emit('closeDetail')
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/style/mixin';
  .detail {
    position: fixed;
    top:0;
    width:100%;
    height:100%;
    z-index:1200;
    background: -webkit-gradient(linear, left top, left bottom, from(#0e0a2e), to(#251f5b));
    background: linear-gradient(#0e0a2e, #251f5b);
    @include transition(left);
    .head{
      z-index: 1001;
      position: static;
      width: 100%;
    }
    ul {

      li {
        display: flex;
        display: -webkit-flex;
        line-height: .80rem;
        border-bottom: .02rem solid rgba(230,229,232,.3);
         padding:0 3%;
        span {
          font-size: .28rem;
          color:#65c4ea;
          &:nth-child(1) {
            text-align: left;
            flex:1;
            -webkit-flex:1;
          }
          &:nth-child(2){
            text-align: right;
            flex:2;
            -webkit-flex:2
          }
        }
      }
    }
  }
</style>
